@charset "utf-8";

@import "reset";
@import "common";
$width:100%;
header{
    border-bottom: 1px solid #DADADA;
    .search{
        position: relative;
        .logo{
            display: flex;
            justify-content: space-between;
            .main-c{
                width: 591px;
                position: relative;
                   .main-top{
                       max-width: 400px;
                       margin: 0 auto;
                       .top-line{
                           border-bottom: 3px solid #CCCCCC;
                           position: relative;
                           height: 40px;
                           .line-name{
                               color: #CCCCCC;
                               position: absolute;
                               top: 60px;
                               width: 80px;
                               margin-left: -40px;
                               text-align: center;
                               font-size: 14px;
                           }
                           .is-on{
                                color: #42cc63;
                             }  
                           .name-1{
                               left: 25%;
                           }
                           .name-2{
                               left: 50%;
                           }
                           .name-3{
                               left: 75%;
                           }
                           .red-line{
                               position: absolute;
                               height: 3px;
                               left: 0;
                               bottom: -3px;
                               background-color: #42cc63;
                               width: 37.5%;
                           }
                           .line-step2{
                               left: 132px;
                           }
                           .line-circular{
                               position: absolute;
                               bottom: -14px;
                               margin-left: -18px;
                               height: 30px;
                               width: 30px;
                               -webkit-border-radius: 50%;
                               border-radius: 50%;
                               background: #CCCCCC;
                               text-align: center;
                               line-height: 30px;
                               color: #FFFFFF;
                           }
                           .active{
                               background: #42cc63;
                           }
                       } 
                   }
               }
        }
    }
}
.content{
    width: $width;
    margin: 0 auto;
    height: 1368px;
    border-bottom: 1px solid #CCCCCC;
    .cart-box{
        max-width: 1317px;
        margin: 0 auto;
        .cart-title{
            background: #EFEFEF;
            height: 40px;
            line-height: 40px;
            margin:52px 0 38px 0;
            >div{
                padding: 0 32px 0 23px;
                display: flex;
                justify-content: space-between;
                font-size: 18px;
                a{
                    color: #9c9c9c;
                    &:hover{
                        color: red;
                    }
                }
            }
        }
        .details-box{
                max-width: 1317px;
                margin: 0 auto;
                &:nth-of-type(3){
                    margin-top: 3px;
                }
                .commodity{
                    width: $width;
                    border: 1px solid #efefef;
                    .table-box{
                        width: $width;
                        height: 139px;
                        padding: 8px 0 0 18px;
                       img{
                            display: inline-block;
                            padding-left: 16px;
                        }
                        td{
                            &:nth-of-type(2){
                                width: 448px;
                                span{
                                    display: inline-block;
                                    vertical-align: top;
                                    padding-left: 12px;
                                    line-height: 34px;
                                    p{
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        width: 120px;
                                    }
                                }
                                .cart-span{
                                        color: #B0B0B0;
                                        padding-left: 0;
                                }
                                .text{
                                    padding-left: 0;
                                    display: inline-block;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    width: 73px;
                                }
                            }
                            &:nth-of-type(3){
                                width: 174px;
                                span{
                                    overflow: hidden;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                    display: inline-block;
                                    width: 62px;
                                }
                            }
                            &:nth-of-type(4){
                                width: 239px;
                            }
                            &:nth-of-type(5){
                                width: 200px;
                                color: #FF0000;
                                span{
                                    display: inline-block;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    width: 62px;
                                }
                            }
                        }
                        .goods-num{
                               position: relative;
            //                     display: inline-block;
                               height: 25px;
                               line-height: 25px;
                               width: 85px;
                               border: 1px solid #DFDFDF;
                               border-radius: 2px;
                               margin-top: -2px;
                               text-align: center;
                               color: #333333;
                               font-size: 12px;
                           }
                           .goods-minus,.goods-plus{
                               width: 24px;
                               height: 23px;
                               border: 1px solid #f9f9f9;
                               border-radius: 2px;
                           }
                           .goods-minus span,.goods-plus span{
                               position: absolute;
                               top: 11px;
                               left: 8px;
                               height: 2px;
                               width: 10px;
                               background: #CCCCCC;
                           }
                           .goods-minus{
                                   position: absolute;
                                   top: 0;
                                   left: 0;
                                   cursor: pointer;
                                   border-right: none;
                               }
                            .goods-plus{
                                   position: absolute;
                                   top: 0;
                                   right: 0;
                                   cursor: pointer;
                                   border-left: none;
                                   span{
                                       &:first-child{
                                           top: 7px;
                                           left: 12px;
                                           height: 10px;
                                           width: 2px;
                                       }
                               }
                            }
                    }
                }
                .message-title{
                    width: $width;
                    background: #efefef;
                    height: 32px;
                    line-height: 32px;
                    span{
                        padding-left: 18px;
                        font-size: 16px;
                        display: inline-block;
                    }
                }
                .message-title2{
                    width: $width;
                    background: #efefef;
                    height: 41px;
                    line-height: 41px;
                    input[type="checkbox"]{
                        margin-left: 18px;
                    }
                    span{
                        font-size: 16px;
                        display: inline-block;
                        &:first-of-type{
                            width: 224px;
                        }
                        &:nth-of-type(2){
                            width: 202px;
                        }
                        &:nth-of-type(3){
                            width: 202px;
                        }
                        &:nth-of-type(4){
                            width: 202px;
                        }
                        &:nth-of-type(5){
                            width: 220px;
                        }
                        &:last-of-type{
                            width: 100px;
                        }
                    }
                }
                .message-title3{
                    width: $width;
                    background: #fffcfc;
                    height: 41px;
                    line-height: 41px;
                    input[type="checkbox"]{
                        margin-left: 18px;
                        display: inline-block;
                        vertical-align: middle;
                    }
                    span{
                        font-size: 16px;
                        display: inline-block;
                        vertical-align: middle;
                        overflow:hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;  
                        width:112px; 
                        &:last-of-type{
                            padding-left: 0;
                            width: 800px;
                            text-align: right;
                            display: inline-block;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                    }
                }
            }
            .cart-botton{
                    width: $width;
                    text-align: right;
                    padding-top: 32px;
                    .cart-l{
                        display: inline-block;
                        span{
                            color: #FF0000;
                        }
                    }
                    .cart-r{
                        display: inline-block;
                        >div{
                            width: 301px;
                            span{
                                display: inline-block;
                                font-size: 14px;
                            }
                            p{
                                display: inline-block;
                                font-size: 14px;
                            }
                            li{
                                &:nth-of-type(2){
                                    padding: 42px 0 30px 0;
                                }
                            }
                        }
                        .yunfei{
                            color: #c6c6c6;
                        }
                        .amount{
                            width: 125px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        .discounts{
                            width: 125px;
                            color: #DADADA;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        .total{
                            width: 125px;
                            color: #FF0000;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
                .cart-btn{
                    width: $width;
                    margin: 0 auto;
                    text-align: right;
                    padding-top: 28px;
                    a{
                        display: inline-block;
                        width: 186px;
                        height: 37px;
                        line-height: 37px;
                        background: #584c4c;
                        border-radius: 5px;
                        color: #FFFFFF;
                        text-align: center;
                    }
                }
    }
}
